<template>
  <div class="loginContainer">
    <div class="topLogo">
      <img src="@/assets/logo.png" alt="" />
    </div>
    <div class="formContainer">
      <div class="inputItem">
        <van-field v-model="phone" placeholder="手机号" clearable required>
          <template #button>
            <van-button size="small" @click="getRegCode">{{
              getCode
            }}</van-button>
          </template>
        </van-field>
      </div>
      <div class="inputItem">
        <van-field v-model="regCode" placeholder="验证码" required />
      </div>
      <div class="loginBtn" @click="login">登录</div>
    </div>
  </div>
</template>
<script>
import { Field, CellGroup, Button } from "vant";
import Vue from "vue";
Vue.use(Field).use(CellGroup).use(Button);
import { mapMutations } from "vuex";
import http from "@/utils/http";
export default {
  data() {
    return {
      phone: "",
      regCode: "",
      getCode: "获取验证码",
      getCodeTimer: "",
    };
  },
  methods: {
    ...mapMutations("tabBarModule", ["hideTB", "showTB"]),
    ...mapMutations("userInfoModule", ["setUserInfo"]),
    login() {
      if (this.phone && this.regCode) {
        http({
          method: "POST",
          url: "/gateway",
          headers: {
            "X-Host": "mall.user.sms-code-login",
          },
          data: {
            mobile: this.phone,
            smsCode: this.regCode,
            imgKey: "",
            imgCode: "",
            extra: {},
          },
        }).then(
          (res) => {
            console.log(res);
            sessionStorage.setItem("token", res.data.data.token);
            sessionStorage.setItem("headIcon", res.data.data.headIcon);
            sessionStorage.setItem("accountName", res.data.data.accountName);
            sessionStorage.setItem("gender", res.data.data.gender);
            sessionStorage.setItem("mobile", res.data.data.mobile);
            sessionStorage.setItem("nickName", res.data.data.nickName);
            sessionStorage.setItem("userId", res.data.data.userId);
            sessionStorage.setItem("birthday", res.data.data.birthday);
            sessionStorage.setItem("isRegiest", res.data.data.isRegiest);
            sessionStorage.setItem("mail", res.data.data.mail);

            this.setUserInfo(res.data.data);
            this.$router.push("/mine");
          },
          () => {
            this.$toast.fail("验证码不正确");
          }
        );
      } else {
        this.$toast.fail("请输入手机号和验证码");
      }
    },
    getRegCode() {
      if (this.getCodeTimer) return;
      if (this.phone.match(/^\d{11}$/)) {
        http({
          method: "POST",
          url: "/gateway",
          data: {
            imgCode: "",
            imgKey: "",
            mobile: this.phone,
            type: "1",
          },
          headers: {
            "X-Host": "mall.user.sms-code.send",
          },
        }).then((res) => {
          if (res.data.msg === "ok") {
            this.$toast.success("验证码已发送");
            let num = 60;
            this.getCodeTimer = setInterval(() => {
              this.getCode = --num;
              if (num === 0) {
                clearInterval(this.getCodeTimer);
                this.getCode = "获取验证码";
              }
            }, 1000);
          }
        });
      } else {
        this.$toast.fail("手机号格式不正确");
      }
    },
  },
  mounted() {
    this.hideTB();
  },
  beforeDestroy() {
    this.showTB();
  },
};
</script>
<style scoped lang='scss'>
.loginContainer {
  padding: 0 30px;
  .topLogo {
    display: flex;
    justify-content: center;
    height: 200px;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
      border-radius: 10px;
    }
  }
  .formContainer {
    .inputItem {
      border-bottom: 1px solid #eee;
      position: relative;
      .vant-cell {
        height: 60px;
      }
    }
    .loginBtn {
      margin-top: 70px;
      background-color: #ff5f16;
      height: 50px;
      color: #ff8f5b;
      line-height: 50px;
      text-align: center;
      border-radius: 5px;
    }
  }
}
</style>
